<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Position 学习</title>
</head>
<style>
   /* div:nth-child(1) {
        width: 1000px;
        height: 200px;
        background: green;
    }

    div:nth-child(2) {
        width: 1000px;
        height: 100px;
        background: red;
    }*/
   /* 行内元素转块  */
    span {
        /*display: block;*/
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    #zero {
        /*width: 200px;*/
        /*height: 200px;*/
        /*!*margin: 100px;*!*/
        /*!*padding: 10px;*!*/
        /*background: pink;*/
        /*position: absolute;*/
    }

   #one{
       width: 100px;
       height: 100px;

       /* 相对父级 无论父级是否这是position*/
       position: relative;
       top: 200px;
       left: 200px;
       /*right: 40px;*/
       /*bottom: 40px;*/
       background: red;
       z-index: 1;
   }
   #two{
       width: 100px;
       height: 100px;
       /* 如果父级未设置position则相对父级进行改变 \
          如果父级设置position则相对父级改变，不论relative or absolute
       */
       position: absolute;
       top: 400px;
       left: 200px;

       background: yellow;
       z-index: 2;
   }
   #tree{
       width: 100px;
       height: 100px;
       /* 相对于浏览器窗口，无论父级是否设置position */
       position: fixed;
       top: 300px;
       left: 100px;
       background: deepskyblue;
       /*z-index: 3;*/
   }

</style>
<body>
    <div id="zero">

        <!--<div id="one">one</div>-->
        <!--<div id="two">two</div>-->
        <!--<div id="tree">tree</div>-->
    </div>
    <span>test</span>

</body>
</html>